<template>
  <div class="m-order-detail">
    <!-- 订单流程 -->
    <div class="process clearfix" v-if="noProcess">
      <!-- 取消（0）下不展示流程，待付款（10）只有拼单中才展示流程，退款（21,22,25）不展示流程，已付款（20）但是拼单失败不展示流程 -->
      <div v-if="orderInfo.orderMark == '0'">
        <div class="item-proce f-l" v-for="(item, index) in proces" :key="index">
          <div class="f-l">
            <div class="fontTitle">{{item.text}}</div>
              <!--未评价状态之前通用样式  -->
              <div v-if="index != 4">
                <div :class="[item.procesed ? 'bg-c1' : 'bg-c2','order-img']"></div>
              </div>

              <!--评价状态通用样式  -->
              <div v-else>
                <div :class="[item.procesed ? 'bg-c3' : 'bg-c4','order-img']"></div>
              </div>

            <div class="fontTime">{{item.time}}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 买家信息 -->
    <div class="order-buyer-info clearfix">
      <w-mange-title title="买家信息"></w-mange-title>
      <!-- 左边 -->
      <div class="buyer-info fl">
        <span class="buyer-title">收货人地址：{{orderInfo.receiverArea}}{{orderInfo.receiverAreaInfo}}</span>
        <br>
        <span class="buyer-title">买家留言：{{orderInfo.msg}}</span>
        <br>
        <span class="buyer-title">买家：{{orderInfo.userName}}</span>
        <br>
        <span class="buyer-title">收货人手机号：{{orderInfo.receiverMobile}}</span>
      </div>
      <!-- 右边 -->
      <div class="order-info">
        <div class="order-status">
          <div class="clearfix">
            <div class="icon-status fl">
              <img src="../../assets/dingdanzhuantai.png" alt="">
            </div>
            <div class="order-del">
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 0">订单状态：订单已取消</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 10">订单状态：等待买家付款</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 13">订单状态：供应链确定贷款成功</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 16">订单状态：货到付款</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 20 || orderInfo.refundStatus == 2">订单状态：买家已付款，等待发货</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 21 || orderInfo.refundStatus == 0 || orderInfo.orderStatus == 22 || orderInfo.refundStatus == 1">订单状态：退款中</h2>
              <!-- <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 22 || orderInfo.refundStatus == 1">订单状态：退款审核中</h2> -->
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 25 || orderInfo.refundStatus == 2">订单状态：退款成功</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.refundStatus == 3">订单状态：退款失败</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 23">订单状态：农商行部分退款</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 30">订单状态：{{orderInfo.consignor == 2 ? '平台发货' : '卖家发货'}}</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 35">订单状态：自提点已经收货</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 40">订单状态：买家已收货</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 41">订单状态：申请退货</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 42">订单状态：退货审核中</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 45">订单状态：退货完毕</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 46">订单状态：退款及退货退款</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 50">订单状态：买家已评价</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 65">订单状态：订单不可评价，到达设定时间，系统自动关闭订单相互评价功能</h2>
              <!-- 供应链订单 -->
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 60">订单状态：银行审核通过</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 61">订单状态：银行审核失败</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 70">订单状态：银行贷款通过</h2>
              <h2 style="margin-bottom: 10px;" v-if="orderInfo.orderStatus == 71">订单状态：银行贷款失败</h2>
              <span style="font-weight: bold">订单编号：{{orderInfo.orderId}}</span>
              <!-- <div style="font-weight: bold" 
                v-if="orderInfo.orderStatus == 21 || orderInfo.orderStatus == 22 || orderInfo.orderStatus == 23 || orderInfo.orderStatus == 25">退款金额：
                <span class="c-main">￥{{orderInfo.totalPrice | currency}}</span>
              </div> -->
              <!-- <div v-if="orderInfo.orderStatus >= 30">
                <div v-if="orderInfo.orderStatus == 30 && timer">· 买家还有
                  <span style="color: #D0021B">
                    <w-count-down-time :start="orderInfo.nowDate" :target="orderInfo.receiverTime" @on-timer="onConfirmTimer"></w-count-down-time>
                  </span>
                  ：未确认收货超时订单自动确认收货
                </div>
                <div v-if="orderInfo.expressName || orderInfo.expressNumber">· 物流：{{orderInfo.expressName}}运单号：{{orderInfo.expressNumber}}</div>
                <span>{{orderInfo.shipTime}}</span>
                <span style="color: #D86F07">{{orderInfo.consignor == 2 ? '平台发货' : '卖家发货'}}</span>
              </div> -->
            </div>
          </div>

          <!-- 你可以进行的操作 -->
          <div class="buyer-options">
            你可以：
            <div class="btns-group">
              <w-button-group>
                <w-button type="option" class="free-look" @on-click="favPanel = true">查看订单优惠明细</w-button>
                <w-button type="option" style="width: 50px" 
                  @on-click="onDeliveryGoods(orderInfo)" 
                  v-if="orderInfo.isTotal != 1 && options && orderInfo.refundStatus != 0 && orderInfo.refundStatus != 1 && orderInfo.refundStatus != 2">
                  发货
                </w-button>
                <w-button type="option" style="width: 50px" @on-click="onShowPrice" v-if="orderInfo.orderStatus == 10 && (orderInfo.refundStatus != 0 || orderInfo.refundStatus != 1 || orderInfo.refundStatus != 2 || orderInfo.refundStatus != 3)">改价</w-button>
                <!-- 退款订单审核，放在退款订单详情页 -->
                <!-- <w-button type="option" style="width: 50px" @on-click="refundModal = true" v-if="orderInfo.orderStatus == 21 && orderInfo.refundStatus == 0 && options">审核</w-button> -->
                <!-- <w-button type="option" class="dev-look" @on-click="lookDevPanel = true" v-if="orderInfo.orderStatus >= 30">查看物流详情</w-button> -->
              </w-button-group>
            </div>
            <span class="t-under btn-t" v-if="orderInfo.orderStatus == 20 && options && payWay != 'rcb_pay'" @click="showConsignorPanel = true">修改发货方</span>
            <!-- <span class="t-under btn-t" @click="panelTitleFar = true" v-if="orderInfo.orderStatus == 30">延长收货时间</span> -->
            <span class="t-under" @click="memorandum = true">商家备忘</span>
          </div>

          <!-- 你还可以进行的操作 -->
          <div class="buyer-options-other">
            您还可以：
            <span class="t-under btn-t" v-if="message && message != ''" @click="onLookTip">查看好下单提醒</span>
            <span class="t-under" v-if="orderInfo.storeSign" @click="signStatus = true">查看标记</span>
          </div>

        </div>
      </div>
    </div>

    <!-- 退款信息 -->
    <!-- <div class="refund-info after-b" v-if="orderInfo.orderStatus == 21 || orderInfo.orderStatus == 22 || orderInfo.orderStatus == 23 || orderInfo.orderStatus == 24">
      <w-mange-title title="退款信息"></w-mange-title>
      <div class="refund-del">
        <span>退款原因：{{orderInfo.userApplyReason}}</span>
        <div class="refund-cause">
          <span>退款说明：{{orderInfo.userApplyExplain}}</span>
        </div>
        <div style="margin-top: 8px;">
          <span style="vertical-align: top;">图片：</span>
          <div class="refund-imgs">
            <ul v-if="orderInfo.userApplyImg && orderInfo.userApplyImg.length">
              <li v-for="(img, imgIndex) in orderInfo.userApplyImg" :key="imgIndex">
                <a :href="img" target="_blank">
                  <img v-lazy="img" alt="">
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div> -->

    <!-- 卖家信息 -->
    <div>
      <w-mange-title title="卖家信息"></w-mange-title>
      <div class="store-info">
        <div>
          <span>店铺名称：{{orderInfo.licenseName}}</span>
        </div>
        <div>
          <span>商家机构号：{{orderInfo.institutionNum}}</span>
        </div>
        <div>
          <span>商家手机号：{{orderInfo.storeTelephone}}</span>
        </div>
      </div>
    </div>

    <!-- 订单信息 -->
    <div class="orders">
      <div class="tab-bg">
        <w-table :columns="columns"></w-table>
      </div>
      <!-- 订单信息：发货之前 -->
      <div class="order-lists" v-if="orderInfo.orderStatus < 30">
        <table v-for="(goods, index) in goodsInfo" :key="index">
          <tr v-for="(gsp, gspIndex) in goods.goodsGsp" :key="gspIndex">
            <td style="width: 40%">
              <div class="goods-info clearfix">
                <div class="goods-img fl">
                  <img v-lazy="goods.goods_mainphoto_path" alt="">
                </div>
                <div class="goods">
                  <p class="p-line-hide">{{goods.goods_name}} {{goods.goodsSerial}}</p>
                  <div class="sku">
                    <span>颜色</span>
                    <input type="text" :value="gsp.goodsSpecContent[0]">
                    <span>尺码</span>
                    <input type="text" :value="gsp.goodsSpecContent[1]">
                  </div>
                  <span class="t-under btn-t update-sku" v-if="(orderInfo.orderStatus == 20) && options && isChangeGoods" @click="onGoodsPanel(goods, gsp, index, gspIndex)">修改商品属性</span>
                </div>
              </div>
            </td>
            <td style="width: 20%">¥{{gsp.goodsSinglePrice}}</td>
            <td style="width: 20%">{{gsp.count}}</td>
            <td style="width: 20%" :rowspan="gspLen" v-if="gspIndex == 0 && goods.reviseGoodsPrice != ''">{{(gsp.goodsSinglePrice - goods.reviseGoodsPrice)*goods.goodsTotalcount || 0 | currency}}</td>
            <td style="width: 20%" :rowspan="gspLen" v-if="gspIndex == 0 && goods.reviseGoodsPrice == ''">0</td>
          </tr>
        </table>
      </div>

      <!-- 订单信息：发货之后 -->
      <div class="order-lists delivery-list" v-else>
        <table v-for="(goods, index) in goodsInfo" :key="index">

          <!-- 有发货信息 -->
          <tbody v-for="(gsp, gspIndex) in goods.goodsGsp" :key="gspIndex">
            <tr v-for="(item, itemIndex) in gsp.delivery" :key="itemIndex">
              <td style="width: 26%" :rowspan="gsp.delivery.length" v-if="itemIndex == 0">
                <div class="goods-info clearfix">
                  <div class="goods-img fl">
                    <img v-lazy="goods.goods_mainphoto_path" alt="">
                  </div>
                  <div class="goods">
                    <p class="p-line-hide">{{goods.goods_name}} {{goods.goodsSerial}}</p>
                    <div class="sku">
                      <span>颜色</span>
                      <input type="text" :value="gsp.goodsSpecContent[0]">
                      <br>
                      <span>尺码</span>
                      <input type="text" :value="gsp.goodsSpecContent[1]">
                    </div>
                    <span class="t-under btn-t update-sku"
                      v-if="orderInfo.orderStatus == 20 && options && isChangeGoods" 
                      @click="onGoodsPanel(goods, gsp, index, gspIndex)">修改商品属性</span>
                  </div>
                </div>
              </td>
              <!-- 总数量 -->
              <td style="width: 10%" :rowspan="gsp.delivery.length" v-if="itemIndex == 0">{{gsp.count || 0}}件</td>
              <!-- 单价 -->
              <td style="width: 10%" :rowspan="gsp.delivery.length" v-if="itemIndex == 0">¥{{gsp.goodsSinglePrice || 0}}</td>
              <!-- 剩余数量 -->
              <td style="width: 9%" :rowspan="gsp.delivery.length" v-if="itemIndex == 0">{{(gsp.count-gsp.actCount) || 0}}件</td>
              <!-- 发货编号 -->
              <td style="width: 13%">{{_validateDevAbled(gsp.actCount) ?  '--' : (item.orderNo || '（自提）')}}</td>
              <!-- 发货量 -->
              <td style="width: 8%">{{_validateDevAbled(gsp.actCount) ?  '--' : `${item.deliveryCount}件`}}</td>
              <!-- 收货状态 -->
              <td style="width: 8%">
                <span :class="{'c-main': !item.status}">{{_validateDevAbled(gsp.actCount) ?  '--' : (!item.status ? '待收货' : '已收货')}}</span>
              </td>
              <!-- 操作 -->
              <td style="width: 16%">
                <div class="c-blue" v-if="!_validateDevAbled(gsp.actCount)">
                  <span @click="_showDevPannel(item.orderNo)">查看物流</span>
                  <!-- <span v-if="!item.status" @click="panelTitleFar = true"> | 延长收货时间</span> -->
                </div>
                <div v-else>--</div>
              </td>
            </tr>
            <tr v-if="!gsp.delivery || !gsp.delivery.length">
              <td style="width: 26%">
                <div class="goods-info clearfix">
                  <div class="goods-img fl">
                    <img v-lazy="goods.goods_mainphoto_path" alt="">
                  </div>
                  <div class="goods">
                    <p class="p-line-hide">{{goods.goods_name}} {{goods.goodsSerial}}</p>
                    <div class="sku" v-if="gsp.goodsSpecContent">
                      <span>颜色</span>
                      <input type="text" :value="gsp.goodsSpecContent[0]">
                      <br>
                      <span>尺码</span>
                      <input type="text" :value="gsp.goodsSpecContent[1]">
                    </div>
                    <span class="t-under btn-t update-sku"
                      v-if="orderInfo.orderStatus == 20 && options && isChangeGoods" 
                      @click="onGoodsPanel(goods, gsp, index, gspIndex)">修改商品属性</span>
                  </div>
                </div>
              </td>
              <!-- 总数量 -->
              <td style="width: 10%">{{gsp.count || 0}}件</td>
              <!-- 单价 -->
              <td style="width: 10%">¥{{gsp.goodsSinglePrice || 0}}</td>
              <!-- 剩余数量 -->
              <td style="width: 9%">--</td>
              <!-- 发货编号 -->
              <td style="width: 13%">--</td>
              <!-- 发货量 -->
              <td style="width: 8%">--</td>
              <!-- 收货状态 -->
              <td style="width: 8%">
                <span>--</span>
              </td>
              <!-- 操作 -->
              <td style="width: 16%">
                <div>--</div>
              </td>
            </tr>
          </tbody>

        </table>
      </div>

      <!-- 订单结算 -->
      <div class="order-amount clearfix">
        <div class="fr">
          <div class="goods-all fl ">
            <span>商品总价： ¥{{orderInfo.goodsPrice | currency}}</span>
            <br>
            <span>店铺优惠： ¥{{orderInfo.subtrahendPrice || 0 | currency}}</span>
            <br>
            <span>运费： ¥{{orderInfo.shipPrice | currency}}</span>
          </div>
          <div class="order-all fr">
            <p>订单总价： ¥{{orderInfo.totalPrice | currency}}</p>
            <p>应收款：<span style="color: #C6000E">¥{{orderInfo.totalPrice | currency}}</span></p>
          </div>
        </div>
      </div>
    </div>

    <!-- 修改发货方 -->
    <w-panel-fixed-wrap v-model="showConsignorPanel" title="修改发货方" :panel-title="showConsignorPanel" :height="`220px`" class="m-deliver m-deliver-consignor" @on-confirm="onUpdateConsignor">
      <div style="text-align: center;">
        <div class="radio-consignor">
          <w-radio label="1" name="consignor" v-model="consignor">商家发货</w-radio>
        </div>
        <div class="radio-consignor">
          <w-radio label="2" name="consignor" v-model="consignor">平台发货</w-radio>
        </div>
      </div>
    </w-panel-fixed-wrap>

    <!-- 查看优惠明细弹出框 -->
    <w-panel-fixed-wrap v-model="favPanel" title="查看订单优惠明细" :show-btns="!favPanel" :panel-title="favPanel" :show-close="favPanel" :width="`300px`" :height="`280px`">
      <p>商品优惠：¥{{orderInfo.subtrahendPrice || 0 | currency}}</p>
      <p>运费优惠：¥{{(orderInfo.originalShipPrice - orderInfo.shipPrice) || 0 | currency}}</p>
    </w-panel-fixed-wrap>

    <!-- 查看标记弹出框 -->
    <w-panel-fixed-wrap v-model="signStatus" title="标记备注" :show-btns="showBtnsSign" :panel-title="panelTitleSign" :show-close="showCloseSign">
      <div class="sign-panel">
        <span style="vertical-align: top">标记备注：</span>
        <div class="remark">
          <p>{{orderInfo.storeSignInfo}}</p>
        </div>
      </div>
    </w-panel-fixed-wrap>

    <!-- 改价弹出框 -->
    <w-panel-validate v-model="changePricePanel" :width="`1060px`" :height="`520px`" :confirm-text="`修改`" @on-confirm="onChangeGoodsPrice" @on-cancel="_cancelParams">
      <div style="margin-bottom: 10px;">订单编号：{{orderInfo.orderId}}</div>
      <div>
        <w-table :columns="changeColumns"></w-table>
        <div class="p-order-list">
          <table v-for="(goods, index) in goodsInfo" :key="index">
            <tr>
              <td>
                <div class="goods-info clearfix">
                  <div class="goods-img fl">
                    <img v-lazy="goods.goods_mainphoto_path" alt="">
                  </div>
                  <div class="goods-name">
                    <p>{{goods.goods_name}} {{goods.goodsSerial}}</p>
                  </div>
                </div>
              </td>
              <td v-if="goods.goodsGsp">
                <span>¥{{goods.goodsGsp[0].goodsSinglePrice | currency}}</span>
              </td>
              <td>
                <div class="input-count">
                  <w-input holder="请输入" rule="isMoney" error="请输入|格式错误" v-model="goods.reviseGoodsPrice" @on-change="onVaRePrice(goods.reviseGoodsPrice, index)"></w-input>
                  <!-- <w-input holder="请输入" rule="isEmpty|isMoney" error="请输入|格式错误" v-model="goods.reviseGoodsPrice" @input="onValidateInput(goods, index, goods.reviseGoodsPrice)"></w-input> -->
                </div>
              </td>
              <td v-if="goods.goodsGsp">
                <div class="input-count" v-if="!goods.reviseGoodsPrice || goods.reviseGoodsPrice == ''">
                  0折
                </div>
                <div v-else>{{((1-(goods.goodsGsp[0].goodsSinglePrice - goods.reviseGoodsPrice)/goods.goodsGsp[0].goodsSinglePrice)*10).toFixed(2) || 0}}折</div>
              </td>
              <td v-if="goods.goodsGsp">
                <span class="input-count" v-if="!goods.reviseGoodsPrice || goods.reviseGoodsPrice == ''">0.00</span>
                <span class="input-count" v-else>{{((goods.goodsGsp[0].goodsSinglePrice - goods.reviseGoodsPrice) * goods.goodsTotalcount || 0) | currency}}</span>
              </td>
            </tr>
          </table>
        </div>

        <div class="m-price">
          <span>运费改价：原运费价格￥{{(orderInfo.shipPrice || 0) | currency}}</span>
          <span class="change">改后运费价格</span>
          <span>￥</span>
          <div class="price">
            <w-input holder="请输入" rule="onlyMoney0" error="格式错误" v-model="prcPrams.reviseShipPrice"></w-input>
          </div>
        </div>
      </div>
    </w-panel-validate>

    <!-- 部分发货 -->
    <w-panel-validate :panel-title="panelTitleDelivery" title="确认发货" v-model="deliveryPanel" :width="`1060px`" :height="`540px`" :confirm-text="`确定`" @on-confirm="onConfirmDelivery" @on-cancel="_cancelParams">
      <div class="m-devliver-pannel">
        <div style="margin-bottom: 10px;">订单编号：{{orderInfo.orderId}}</div>
        <div>
          <w-table :columns="deliveryColumns"></w-table>
          <div class="p-order-list">
            <table v-for="(goods, index) in goodsInfo" :key="index">
              <tr v-for="(gsp, gspIndex) in goods.goodsGsp" :key="gspIndex">
                <td>
                  <div class="goods-info clearfix">
                    <div class="goods-img fl">
                      <img v-lazy="goods.goods_mainphoto_path" alt="">
                    </div>
                    <div class="goods-name">
                      <p>{{goods.goods_name}} {{goods.goodsSerial}}</p>
                      <div class="goods-sku txt-goods" v-if="gsp.goodsSpecContent">
                        <span>颜色：{{gsp.goodsSpecContent[0]}} </span>
                        <span style="margin-left: 16px">尺码：{{gsp.goodsSpecContent[1]}}</span>
                      </div>
                    </div>
                  </div>
                </td>
                <!-- 单价 -->
                <td>
                  <span style="font-size: 14px;">¥{{gsp.goodsSinglePrice | currency}}</span>
                </td>
                <!-- 总件数 -->
                <td>
                  <div class="input-count">{{gsp.count || 0}}件</div>
                </td>
                <!-- 本次发货件数 -->
                <td>
                  <div class="input-count" style="display: inline-block;margin-right: 5px">
                    <w-input holder="请输入" rule="onlyIntNo0" error="请输入>0的数值" 
                      v-model="gsp.deliveryCount" 
                      @on-blur="_validateCount(gsp.deliveryCount, gspIndex)"
                      :disabled="gsp.disabledDelivery"></w-input>
                  </div>件
                </td>
                <!-- 剩余件数 -->
                <td>
                  <span class="input-count">{{(gsp.count-gsp.actCount) || 0}}件</span>
                </td>
                <!-- 备注 -->
                <td>
                  <div style="width: 80%; margin: 0 auto;">
                    <w-input rule="isName" error="不包含特殊字符" v-model="gsp.note":validate="false" :disabled="gsp.disabledDelivery"></w-input>
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </div>

        <div class="m-confirm-delivery dev-info">
          <div class="delivery">
            <span class="title">物流模式</span>
            <div class="info">
              <w-select :options="deliveryModal" :defaultSe="!deliveryPanel" v-model="deliveryType"></w-select>
            </div>
          </div>
          <div class="delivery" v-if="deliveryType == '1'">
            <span class="title">物流名称</span>
            <div class="info">
              <w-input holder="请输入" rule="isName" error="不包含特殊字符" :validate="false" v-model="business"></w-input>
            </div>
          </div>
          <div class="delivery" v-if="deliveryType == '1'">
            <span class="title">物流单号</span>
            <div class="info">
              <w-input holder="请输入" rule="isEmpty|isNumEn" error="请输入物流单号|请输入字母，数字或其组合" v-model="orderNo"></w-input>
            </div>
          </div>
        </div>
      </div>
    </w-panel-validate>

    <!-- 延长收货时间 -->
    <w-panel-validate :panel-title="panelTitleFar" title="延长收货" v-model="panelTitleFar" :confirm-text="`提交`" @on-confirm="onConfirmDeliveryOptions(1)">
      <div class="m-confirm-delivery">
        <div class="delivery">
          <span class="title" style="width: 100px;">订单编号</span>
          <div class="info">
            <w-input :validate="false" :disabled="disabledDev" v-model="orderInfo.orderId"></w-input>
          </div>
        </div>
        <div class="delivery">
          <span class="title" style="width: 100px;">延长时间（天）</span>
          <div class="info">
            <w-input holder="请输入" rule="isEmpty|onlyIntNo0" error="请输入延长时间|请输入大于0的数字" v-model="extendTime"></w-input>
          </div>
        </div>
      </div>
    </w-panel-validate>

    <!-- 商家备忘 -->
    <w-panel-validate :panel-title="memorandum" title="商家备忘" v-model="memorandum" :confirm-text="`提交`" @on-confirm="onConfirmDeliveryOptions(2)">
      <div class="m-confirm-delivery">
        <div class="delivery">
          <span class="title">订单编号</span>
          <div class="info">
            <w-input :validate="false" :disabled="disabledDev" v-model="orderInfo.orderId"></w-input>
          </div>
        </div>
        <div class="delivery">
          <span class="title" style="vertical-align: top;">备忘内容</span>
          <div class="info">
            <w-input type="textarea" holder="请输入" rule="isEmpty" error="请输入延长时间" v-model="storeMemorandum"></w-input>
          </div>
        </div>
      </div>
    </w-panel-validate>

    <!-- 修改订单商品属性 -->
    <w-panel-validate :panel-title="changeGspPanel" :height="`400px`" title="修改商品属性" v-model="changeGspPanel" :confirm-text="`提交`" @on-confirm="onConfirmDeliveryOptions(4)">
      <div class="m-change-gsp">
        <div class="goods-info clearfix">
          <div class="fl">
            <div class="img">
              <img v-lazy="goodsSkuInfo.goods_mainphoto_path" alt="">
            </div>
          </div>
          <div class="info">
            <p>{{goodsSkuInfo.goods_name}} {{goodsSkuInfo.goodsSerial}}</p>
            <div class="goods-c">
              <span>{{goodsSku.specColor}}</span>
              <span>{{goodsSku.specSize}}</span>
              <span>价格：{{goodsSku.goodsPrice | currency}}</span>
              <span>数量：{{goodsSku.count || 0}}</span>
            </div>
          </div>
        </div>

        <div class="sku-list">
          <p>请选择新的分类</p>
          <div class="gsp clearfix">
            <span class="title fl">颜色分类：</span>
            <div class="sku">
              <span class="cur span" v-for="(color, colorIndex) in colorList" :key="colorIndex" :class="{'c-main': colorGsp == color}" @click="colorGsp = color">{{color}}</span>
            </div>
          </div>
          <div class="gsp clearfix">
            <span class="title fl">尺码分类：</span>
            <div class="sku">
              <span v-for="(color, cIndex) in goodsDetailList" :key="cIndex">
                <span v-if="colorGsp == color.specpropertyName">
                  <span class="cur span" 
                    v-for="(size, sizeIndex) in color.specpropertyList"
                    :key="sizeIndex"
                    :class="{'c-main': sizeGsp == size.specpropertyName && (Number(size.specpropertyInventCount) >= Number(goodsSku.count) || supplyMode != 1), 'disabled': Number(size.specpropertyInventCount) < Number(goodsSku.count) && supplyMode == 1}"
                    @click="onUpdateSku(color.specpropertyName, sizeGsp, size.specpropertyName, goodsSku.count)">{{size.specpropertyName}}</span>
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </w-panel-validate>

    <!-- 查看物流弹出框 -->
    <w-panel-fixed-wrap :panel-title="lookDevPanel" :show-close="lookDevPanel" title="物流详情" v-model="lookDevPanel" :width="`800px`" :height="`520px`" :show-btns="false">
      <div class="dev-info">
        <div class="dev-title">
          <span style="margin: 0 100px 0 30px;">时间</span>
          <span>地点和跟踪进度</span>
        </div>

        <!-- 物流详细信息 -->
        <div class="logistics" v-if="expressInfo && expressInfo.length">
          <!-- 时间分组 -->
          <div class="time-group" v-for="(item, index) in expressInfo" :key="index">
            <div class="time-number fl">
              <span class="date">{{item.time}}</span>
              <div class="date-week">
                <span class="time">02:07</span>
                <!-- <span class="week">星期四</span> -->
              </div>
            </div>
            <div class="logistics-info">
              <p>{{item.status}}</p>
            </div>
            <div class="clear"></div>
          </div>
        </div>
        <div class="logistics" v-else>
          <p>暂无物流信息</p>
        </div>
      </div>
    </w-panel-fixed-wrap>

    <!-- 退款审核 -->
    <w-panel-fixed-wrap v-model="refundModal" title="退款审核" :width="`500px`" :confirm-text="`提交`" @on-confirm="onConfirmDeliveryOptions(5)">
      <div class="review-refund">
        <div>
          <span class="refund-title">订单金额：</span><span>{{orderInfo.totalPrice | currency}}元</span>
        </div>
        <div>
          <span class="refund-title">审核结果：</span>
          <w-radio :label="1" name="review" v-model="status">通过</w-radio>
          <w-radio :label="2" name="review" v-model="status">拒绝</w-radio>
        </div>
        <div>
          <span class="refund-title">订单编号：</span>
          <div class="refund-input">
            <w-input :disabled="true" v-model="orderInfo.orderId"></w-input>
          </div>
        </div>
        <div v-if="status == '2'">
          <span class="refund-title">原因：</span>
          <div class="refund-input">
            <textarea placeholder="请填写原因" v-model="auditFailReason"></textarea>
          </div>
        </div>
      </div>
    </w-panel-fixed-wrap>

    <!-- 查看好下单提醒 -->
    <w-panel-fixed-wrap v-model="tipPanel" :width="`357px`" :height="`308px`" :show-btns="false" title="好下单提醒" :panel-title="panelTitleTip" :show-close="showCloseTip">
      <div class="tip-panel">
        <span>{{message}}</span>
      </div>
    </w-panel-fixed-wrap>

  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { apiOrderMange, apiFight } from 'js/api'
import { session } from 'js/util'

export default {
  data() {
    return {
      proces: [
        {
          text: '拍下商品',
          time: '',
          procesed: true
        },
        {
          text: '已付款',
          time: '',
          procesed: false
        },
        {
          text: '已发货',
          time: '',
          procesed: false
        },
        {
          text: '确认收货',
          time: '',
          procesed: false
        },
        {
          text: '评价',
          time: '',
          procesed: false
        }
      ],
      favPanel: false, // 优惠明细
      showCloseTip: true,
      panelTitleTip: true,
      lookDevPanel: false, // 查看物流弹出框
      changePricePanel: false, // 改价弹出框
      tipPanel: false, // 查看好下单提醒
      changeColumns: [
        {title: '商品', width: '38%'},
        {title: '单价', width: '14%'},
        {title: '修改单价', width: '16%'},
        {title: '折扣', width: '16%'},
        {title: '优惠', width: '16%'}
      ],
      orderInfo: {},
      goodsInfo: [],
      // 改价
      prcPrams: {
        accessToken: '',
        ofId: this.$route.params.orderid,
        reviseShipPrice: '',
        reviseGoodsPriceList: []
      },
      gspLen: 0, // 每个商品的sku数量
      // 部分发货
      deliveryColumns: [
        {title: '商品', width: '26%'},
        {title: '单价', width: '10%'},
        {title: '总数量', width: '12%'},
        {title: '本次发货', width: '12%'},
        {title: '剩余数量', width: '10%'},
        {title: '发货备注', width: '22%'}
      ],
      // 部分发货参数
      deliveryParams: {
        accessToken: '',
        ofId: '',
        threeMenuCode: this.$route.query.three || '',
        delivery: []
      },
      // 物流
      orderNo: '',
      deliveryType: '',
      business: '', // 物流名称
      deliveryModal: [
        {label: '物流', value: '1'},
        {label: '自提', value: '0'}
      ],
      disabledDev: true, // 禁止输入
      panelTitleDelivery: true,
      deliveryPanel: false, // 发货
      showConsignorPanel: false, // 修改发货方弹框
      // 收货
      panelTitleFar: false,
      extendTime: '',
      // 备忘
      memorandum: false,
      storeMemorandum: '',
      // 修改商品属性
      changeGspPanel: false,
      goodsSkuInfo: {},
      goodsSku: {},
      colorGsp: '',
      sizeGsp: '',
      colorList: [],
      curGspIndex: '',
      curGoodsIndex: '',
      goodsDetailList: [], // 商品的所有规格
      signStatus: false, // 标记弹出框
      showBtnsSign: false,
      showCloseSign: true,
      panelTitleSign: true,
      expressInfo: {}, // 物流详情
      // 退款审核
      refundModal: false,
      status: 1, // 审核状态
      auditFailReason: '', // 退款审核内容
      message: '', // 提醒
      timer: true, // 倒计时
      consignor: '',
      payWay: '', // 付款方式
      isChangeSku: true, // 是否可更改商品属性
      supplyMode: '', // 供货方式
      isChangeGoods: true // 商品销售状态
    }
  },
  computed: {
    ...mapGetters(['token']),
    // 判断订单详情来源
    options() {
      if (this.$route.query.origin && this.$route.query.origin == 'fight') {
        return false
      }
      return true
    },
    /**
     * 计算流程图width
     */
    width() {
      return `${100 / this.proces.length}%`
    },
    /**
     * 显隐当前的订单流程
     */
    noProcess() {
      if (this.orderInfo.orderStatus == 0 || this.orderInfo.orderStatus == 21 || this.orderInfo.orderStatus == 22 || this.orderInfo.orderStatus == 23 || this.orderInfo.orderStatus == 25) {
        return false
      }
      // 供应链订单--银行审核失败或银行贷款失败，则不展示进度条
      if (this.orderInfo.orderStatus == '61' || this.orderInfo.orderStatus == '71') {
        return false
      }
      return true
    },
    // 根据订单状态，判断订单信息列表的头部标题
    columns() {
      if (this.orderInfo.orderStatus < 30) {
        return [
          {title: '货品', width: '40%'},
          {title: '单价', width: '20%'},
          {title: '数量', width: '20%'},
          {title: '优惠', width: '20%'}
        ]
      }
      return [
        {title: '货品', width: '26%'},
        {title: '总数量', width: '10%'},
        {title: '单价', width: '10%'},
        {title: '剩余数量', width: '9%'},
        {title: '发货编号', width: '13%'},
        {title: '发货量', width: '8%'},
        {title: '收货状态', width: '8%'},
        {title: '操作', width: '16%'}
      ]
    }
  },
  created() {
    // this.addBreads([{name: '订单详情'}])
    this.fetchOrderInfo()
  },
  methods: {
    ...mapActions(['addBreads']),
    /**
     * 获取订单详情
     */
    fetchOrderInfo() {
      if (!this.$route.params.orderid) return
      apiOrderMange.apiCOrderInfo(this.token, this.$route.params.orderid).then(data => {
        this.orderInfo = data.bean || {}
        this.goodsInfo = JSON.parse(this.orderInfo.goodsInfo || '[]') // 获取商品信息
        this.getOrderInfo(this.orderInfo.orderStatus)
        this.fetchRemindMessage()
        let goodsIdArr = []
        this.goodsInfo.forEach(goods => {
          goodsIdArr.push(goods.goods_id)
          this.$set(goods, 'reviseGoodsPrice', goods.reviseGoodsPrice || '')
          this.gspLen += goods.goodsGsp.length // 计算商品的sku个数
          goods.goodsGsp.forEach(gsp => {
            this.$set(gsp, 'deliveryCount', '') // 发货时，发货量
            this.$set(gsp, 'note', '') // 发货时，发货备注
            this.$set(gsp, 'disabledDelivery', false) // 是否可以发货，默认可以
            session.set('oldGsp', gsp.goodsSpecContent)
            this.$set(gsp, 'oldGoodsSpecContent', session.get('oldGsp'))
          })
        })
        this._fetchGoodsStatus(goodsIdArr) // 查询商品在售状态
        this.consignor = this.orderInfo.consignor // 用于修改发货方
        this.payWay = this.orderInfo.paymentMark // 付款方式
      })
      // if (this.$route.query.reid) {
      //   apiOrderMange.apiReOrderInfo(this.token, this.$route.query.reid).then(data => {
      //     this.orderInfo = data.bean || {}
      //     this.goodsInfo = JSON.parse(this.orderInfo.goodsInfo || '[]') // 获取商品信息
      //     this.getOrderInfo(this.orderInfo.orderStatus)
      //     this.fetchExpressInfo()
      //     this.fetchRemindMessage()
      //     this.goodsInfo.forEach(goods => {
      //       this.$set(goods, 'reviseGoodsPrice', goods.reviseGoodsPrice || '')
      //       if (!goods.goodsGsp || !goods.goodsGsp.length) return
      //       this.gspLen += goods.goodsGsp.length // 计算商品的sku个数
      //       goods.goodsGsp.forEach(gsp => {
      //         session.set('oldGsp', gsp.goodsSpecContent)
      //         this.$set(gsp, 'oldGoodsSpecContent', session.get('oldGsp'))
      //       })
      //     })
      //     this.consignor = this.orderInfo.consignor // 用于修改发货方
      //     this.payWay = this.orderInfo.paymentMark // 付款方式
      //   })
      // } else {
      //   // 除退款订单详情
      //   apiOrderMange.apiCOrderInfo(this.token, this.$route.params.orderid).then(data => {
      //     this.orderInfo = data.bean || {}
      //     this.goodsInfo = JSON.parse(this.orderInfo.goodsInfo || '[]') // 获取商品信息
      //     this.getOrderInfo(this.orderInfo.orderStatus)
      //     this.fetchRemindMessage()
      //     let goodsIdArr = []
      //     this.goodsInfo.forEach(goods => {
      //       goodsIdArr.push(goods.goods_id)
      //       this.$set(goods, 'reviseGoodsPrice', goods.reviseGoodsPrice || '')
      //       this.gspLen += goods.goodsGsp.length // 计算商品的sku个数
      //       goods.goodsGsp.forEach(gsp => {
      //         this.$set(gsp, 'deliveryCount', '') // 发货时，发货量
      //         this.$set(gsp, 'note', '') // 发货时，发货备注
      //         this.$set(gsp, 'disabledDelivery', false) // 是否可以发货，默认可以
      //         session.set('oldGsp', gsp.goodsSpecContent)
      //         this.$set(gsp, 'oldGoodsSpecContent', session.get('oldGsp'))
      //       })
      //     })
      //     this._fetchGoodsStatus(goodsIdArr) // 查询商品在售状态
      //     this.consignor = this.orderInfo.consignor // 用于修改发货方
      //     this.payWay = this.orderInfo.paymentMark // 付款方式
      //   })
      // }
    },
    /**
     * 校验发货量与可发货的数量
     * @param count 发货量
     * @param curIndex 当前点击的sku
     */
    _validateCount(count, curIndex) {
      if (!count) return
      let canCount = 0 // 可发货量
      this.goodsInfo.forEach(goods => {
        goods.goodsGsp.forEach((gsp, index) => {
          if (curIndex == index) {
            canCount = Number(gsp.count) - Number(gsp.actCount)
            if (Number(count) > canCount) {
              this.$toast(`超出可发货量，最多发货${canCount}件`)
              gsp.deliveryCount = canCount
            }
          }
        })
      })
    },
    /**
     * 校验当前sku，是否有发货
     * @param actCount 已发货总量
     */
    _validateDevAbled(actCount) {
      // 若已发货总量==0，则可发货
      if (!Number(actCount)) {
        return true
      }
      return false
    },
    /**
     * 修改商品属性之前，需验证该订单中的商品是否都是在售状态，若有非售状态，则不予修改商品属性
     */
    _fetchGoodsStatus(goodsIds) {
      apiOrderMange.apiGoodsStatus(goodsIds).then(data => {
        // 不可修改商品属性
        if (data.code == '329') {
          this.isChangeGoods = false
        }
      })
    },
    /**
     * 展示物流弹框
     */
    _showDevPannel(orderNo) {
      this.lookDevPanel = true
      this.fetchExpressInfo(orderNo)
    },
    /**
     * 获取物流详情
     */
    fetchExpressInfo(orderNo) {
      apiOrderMange.apiExpressInfo(this.token, this.$route.params.orderid, orderNo).then(data => {
        this.expressInfo = JSON.parse(data.bean.order_express_info || '[]')
      })
    },
    /**
     * 获取好下单提醒
     */
    fetchRemindMessage() {
      apiOrderMange.apiRemindMessage(this.token, this.$route.params.orderid).then(data => {
        if (data.bean == null || data.bean == 'undefined') return
        this.message = data.bean.content || ''
      })
    },
    // 获取订单的状态，时间
    getOrderInfo(orderStatus) {
      orderStatus = Number(orderStatus)
      if (orderStatus == 10) {
        this.proces[0].time = this.orderInfo.addTime
      } else if (orderStatus == 20) {
        this.procesedTrue(1)
      } else if (orderStatus >= 30 && orderStatus < 40) {
        this.procesedTrue(2)
      } else if (orderStatus >= 40 && orderStatus < 50) {
        this.procesedTrue(3)
      } else if (orderStatus >= 50) {
        this.procesedTrue(4)
      }
    },
    // 循环显示状态是否已完成
    procesedTrue(index) {
      this.proces.forEach((item, i) => {
        item.procesed = false
        item.time = ''
        if (i <= index) {
          item.procesed = true
        }
      })
      this.procesTime()
    },
    // 订单流程中，每个订单状态的时间
    procesTime() {
      this.proces[0].time = this.orderInfo.addTime // 拍下时间
      if (!this.orderInfo.payTime) return
      this.proces[1].time = this.orderInfo.payTime // 付款时间
      if (!this.orderInfo.shipTime) return
      this.proces[2].time = this.orderInfo.shipTime // 发货时间
      if (!this.orderInfo.confirmTime) return
      this.proces[3].time = this.orderInfo.confirmTime // 收货时间
      if (!this.orderInfo.evaluateTime) return
      this.proces[4].time = this.orderInfo.evaluateTime // 评价时间
      this.ship = this.proces[2].time
    },
    /**
     * 验证改后价是否小于当前单价
     */
    // onValidateInput(goods, index, val) {
    //   if (Number(val) > Number(goods.goodsGsp[0].goodsSinglePrice)) {
    //     this.$toast('改后价应小于当前商品的单价', () => {
    //       this.goodsInfo.forEach((goods, goodsIndex) => {
    //         if (goodsIndex == index) {
    //           goods.reviseGoodsPrice = ''
    //         }
    //       })
    //     })
    //   }
    // },
    /**
     * 显示改价弹框
     */
    onShowPrice() {
      this.changePricePanel = true
      this.prcPrams.reviseGoodsPriceList = []
    },
    /**
     * 改后价高于当前商品单价，给予提示
     */
    onVaRePrice(val, curIndex) {
      this.goodsInfo.forEach((goods, index) => {
        if (curIndex == index && goods.goodsGsp) {
          if (val > goods.goodsGsp[0].goodsSinglePrice) {
            this.$toast('优惠价应低于当前商品价格哦')
          }
        }
      })
    },
    /**
     * 改价,不判断当前的单价与改后价
     */
    onChangeGoodsPrice() {
      let flag = true
      this.goodsInfo.forEach(goods => {
        if (goods.reviseGoodsPrice) {
          // if (goods.reviseGoodsPrice > goods.goodsGsp[0].goodsSinglePrice) {
          //   this.$toast('优惠价应低于当前商品价格哦')
          //   // flag = false
          // }
          this.prcPrams.reviseGoodsPriceList.push({
            goodsId: goods.goods_id,
            reviseGoodsPrice: Number(goods.reviseGoodsPrice)
          })
        }
      })
      if (flag) {
        // if (this.prcPrams.reviseShipPrice && this.prcPrams.reviseShipPrice >= this.orderInfo.shipPrice) {
        //   this.$toast('改后运费需低于当前运费')
        //   return
        // }
        this.prcPrams.accessToken = this.token
        apiOrderMange.apiChangeGoodsPrice(this.prcPrams).then(data => {
          if (data == '332') {
            this.prcPrams.reviseGoodsPriceList = []
            return
          }
          this.$toast('改价成功', () => {
            this.changePricePanel = false
            this.fetchOrderInfo()
          })
        })
      }
    },
    /**
     * 清空改价弹框内容
     */
    _cancelParams() {
      this.prcPrams.reviseShipPrice = ''
      this.prcPrams.reviseGoodsPriceList = []
      // 清空数据
      this.goodsInfo.forEach(goods => {
        goods.reviseGoodsPrice = ''
      })
      // 清空发货的数据
      this.deliveryParams.delivery = []
      this.orderNo = ''
      this.business = ''
      this.deliveryType = ''
    },
    /**
     * 发货弹框
     */
    onDeliveryGoods(orderInfo) {
      this.deliveryPanel = true
      this.deliveryParams.ofId = orderInfo.id
      this.goodsInfo.forEach(goods => {
        goods.goodsGsp.forEach(gsp => {
          // 当已发货量>=总数量，则不可再次发货
          if (Number(gsp.actCount) >= Number(gsp.count) || gsp.refundStatus == '0' || gsp.refundStatus == '1' || gsp.refundStatus == '2') {
            gsp.disabledDelivery = true
          } else {
            gsp.disabledDelivery = false
          }
        })
      })
    },
    /**
     * 确认发货操作
     */
    onConfirmDelivery() {
      let _this = this
      let count = 0
      if (this.deliveryType != '0' && this.deliveryType != '1') {
        this.$toast('请选择物流模式')
        return
      }
      // 多个sku，必须有一个sku的发货量>0
      this.goodsInfo.forEach(goods => {
        goods.goodsGsp.forEach(gsp => {
          count += Number(gsp.deliveryCount)
          if (!gsp.deliveryCount) return
          this.deliveryParams.delivery.push({
            'goodsCartId': gsp.goodsCartId,
            'deliveryCount': Number(gsp.deliveryCount),
            'orderNo': this.orderNo,
            'deliveryType': Number(this.deliveryType),
            'business': this.business,
            'note': gsp.note,
            'status': 0
          })
        })
      })
      if (!count) {
        this.$toast('必须有一个SKU的发货量>0')
        return
      }
      if (this.deliveryType == '1' && !this.business) {
        this.$toast('选择“物流”时，请输入物流名称')
        return
      }
      // 若有sku未发货，则该sku的清空物流信息
      this.deliveryParams.delivery.forEach(v => {
        if (!v.deliveryCount) {
          v.orderNo = ''
          v.business = ''
          v.deliveryType = ''
        }
      })
      this.deliveryParams.accessToken = this.token
      this.deliveryParams.threeMenuCode = this.$route.query.three || ''
      // 自提
      if (this.deliveryType == '0') {
        this.orderNo = null
        this.business = null
      }
      apiOrderMange.apiDeliveryGoods(this.deliveryParams).then(data => {
        _this.$toast('发货成功', () => {
          // 清空参数
          _this.deliveryParams.delivery = []
          _this.orderNo = ''
          _this.business = ''
          _this.deliveryType = ''
          _this.$emit('on-refresh')
          _this.deliveryPanel = false
          _this.fetchOrderInfo()
        })
      })
    },
    /**
     * 倒计时结束，自动确认收货，更该订单状态为已收货，待评价
     */
    onConfirmTimer() {
      this.timer = false
    },
    /**
     * 修改属性弹框,获取点击的商品详情
     */
    onGoodsPanel(goodsInfo, gsp, goodsIndex, gspIndex) {
      this.changeGspPanel = true
      this.goodsSkuInfo = goodsInfo // 该商品的详细信息
      this.goodsSku = gsp
      this.colorGsp = this.goodsSku.goodsSpecContent[0] || '' // 颜色
      this.sizeGsp = this.goodsSku.goodsSpecContent[1] || '' // 尺码
      this.fetchGoodsInfo(goodsInfo.goods_id)
      this.curGoodsIndex = goodsIndex // 当前商品
      this.curGspIndex = gspIndex // 当前gsp
    },
    /**
     * 修改订单属性时，获取该商品的所有信息
     */
    fetchGoodsInfo(goodsId) {
      this.colorList = []
      apiFight.getGoodsGspDetail(goodsId).then(data => {
        this.goodsDetailList = data.goodsDetailList || []
        this.supplyMode = data.supplyMode
        if (!this.goodsDetailList || this.goodsDetailList.length == 0) return
        this.goodsDetailList.forEach(v => {
          this.colorList.push(v.specpropertyName)
        })
      })
    },
    /**
     * 延长收货时间, 商家备忘，修改商品属性，审核退款
     */
    onConfirmDeliveryOptions(type) {
      const params = {
        accessToken: this.token,
        ofId: this.orderInfo.id,
        // extendTime: parseInt(this.extendTime), // 延期收货
        storeMemorandum: this.storeMemorandum, // 商家备忘
        goodsInfo: [], // 修改商品属性
        status: this.status, // 审核结果
        reId: this.orderInfo.reId || '', // 审核id
        auditFailReason: this.auditFailReason, // 退款审核不通过原因
        type: parseInt(type)
      }
      if (type == 4) {
        this.goodsInfo.forEach((goods, gIndex) => {
          if (gIndex == this.curGoodsIndex) {
            goods.goodsGsp.forEach((gsp, gspIndex) => {
              if (gspIndex == this.curGspIndex) {
                gsp.goodsSpecContent[0] = this.colorGsp
                gsp.goodsSpecContent[1] = this.sizeGsp
                gsp.specColor = `顔色:${this.colorGsp}`
                gsp.specSize = `尺码:${this.sizeGsp}`
              }
            })
          }
        })
        params.goodsInfo = this.goodsInfo
      }
      if (type == 5 && this.status == '2' && this.auditFailReason == '') {
        this.$toast('请填写审核不通过原因')
        return
      }
      if (!this.isChangeSku) return
      apiOrderMange.apiDeliveryGoodsFar(params).then(data => {
        this.$toast('操作成功', () => {
          this.fetchOrderInfo()
          this.panelTitleFar = false
          this.memorandum = false
          this.changeGspPanel = false
          this.refundModal = false
          // 延长收货时，同时刷新页面
          if (type == 1) {
            this.$router.go(0)
          }
        })
      })
    },
    /**
     * 修改商品属性
     * 匹配商品库存与所购商品数量
     * 若库存不足，则不可更改商品属性
     */
    onUpdateSku(color, name, size, count) {
      this.goodsDetailList.forEach(v => {
        if (v.specpropertyName == color) {
          v.specpropertyList.forEach(item => {
            if (item.specpropertyName == size) {
              if (Number(item.specpropertyInventCount) < Number(count) && this.supplyMode == 1) {
                this.isChangeSku = false
                this.$toast('该尺码库存不足')
              } else if (this.supplyMode != 1 || Number(item.specpropertyInventCount) >= Number(count)) {
                this.isChangeSku = true
                this.sizeGsp = item.specpropertyName
              }
            }
          })
        }
      })
    },
    /**
     * 修改发货方
     */
    onUpdateConsignor() {
      let _this = this
      apiOrderMange.apiEditConsigor(_this.orderInfo.id, _this.consignor).then(data => {
        _this.$toast('修改成功', () => {
          _this.fetchOrderInfo()
          _this.showConsignorPanel = false
        })
      })
    },
    /**
     * 查看好下单提醒
     */
    onLookTip() {
      this.tipPanel = true
    },
    /**
     * 退款审核
     */
    onRefundReview() {
      this.refundModal = false
    }
  }
}
</script>

<style lang="scss">
.m-order-detail {
  .p-order-list {
    .w-input .error-tip {
      width: 100%
    }
  }
  .g-panel-fixed {
    .btn {
      width: 140px !important;
    }
  }
  .m-confirm-delivery {
    .w-input .error-tip {
      left: 0
    }
    .w-input, .select-container {
      width: 100%;
    }
  }
}
</style>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
.radio-consignor {
  display: inline-block;
  margin: 0 auto;
  width: 150px;
}
.m-change-gsp {
  .goods-info {
    width: 100%;
    padding: 10px;
    background:rgba(242,242,242,1);
    .img {
      width:60px;
      height:60px;
      margin-right: 10px;
    }
    .info {
      position: relative;
      width: 400px;
      height: 60px;
      display: inline-block;
      .goods-c {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        span {
          padding-right: 2%
        }
      }
    }
  }
  .sku-list {
    margin-top: 20px;
    .gsp {
      margin: 16px 0 16px 50px;
      .title {
        display: inline-block;
        vertical-align: top;
      }
      .sku {
        display: inline-block;
        width: 84%;
        white-space: pre-wrap;
        .span {
          padding: 4px 10px;
          border: 1px solid;
          border-radius: 8px;
          margin: 0 8px 8px 4px;
          display: inline-block;
          color: $color-disabled;
        }
      }
      .disabled {
        cursor: not-allowed;
      }
    }
  }
}
// 物流
.dev-info {
  .dev-title {
    border-bottom: 1px solid $border-gray-light;
    padding-bottom: 8px;
    span {
      font-weight: 600;
    }
  }
  // 物流时间轴
  .logistics {
    padding: 15px 0 20px 0;
    .time-group {
      margin-bottom: 14px;
      position: relative;
      &:first-child {
        &::before {
          background-image: url(../../assets/logistics-now.png);
        }
        .date-week {
          color: #FF6C00 !important;
        }
      }
      &:last-child {
        margin-bottom: 0;
        &::after {
          background-color: transparent;
        }
      }
      .time-number {
        width: 120px;
        text-align: center;
        padding: 0px 0px 12px 0px;
        
        .date {
          font-size: 12px;
          color: #9B9B9B;
          margin-bottom: 8px;
        }
        .date-week {
          color: #333333;
          font-size: 14px;
        }
        .week {
          margin-left: 8px;
        }

      }
      .logistics-info {
        position: relative;
        display: inline-block;
        margin: 8px 0 20px 50px;
        max-width: 550px;
      }

      &:after {
        content: "";
        display: block;
        position: absolute;
        height: calc(100% - 0px);
        width: 2px;
        top: 28px;
        left: 138px;
        background-color: #DDDDDD;
      }

      &:before {
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        position: absolute;
        top: 10px;
        left: 130px;
        right: 20px;
        z-index: 10;
        background-image: url(../../assets/logistics-over.png);
        background-repeat: no-repeat;
      }
      .clear {
        clear: both;
        overflow: hidden;
      }
    }
  }
} 
// 发货后的订单列表样式
.delivery-list {
  font-size: 12px;
  .c-blue {
    color: #4A90E2;
    cursor: pointer;
    span {
      line-height: 22px;
    }
  }
  tbody {
    border-bottom: 1px solid #e4dfdf;
    &:last-child {
      border-bottom: none
    }
  }
}
.order-lists {
  border: 1px solid $border-gray-light;
  margin-top: 10px;
  margin-bottom: 20px;
  table {
    width: 100%;
    margin: 10px 0 10px 10px;
    td {
      text-align: center;
    }
  }
}
.t-under {
  text-decoration: underline;
  margin-right: 18px;
  font-size: 12px;
  cursor: pointer;
}
.btn-t {
  color: rgba(74,144,226,1);
}
// 订单流程
.process {
  width: 80%;
  position: relative;
  margin: 20px auto;
  .item-proce{
    text-align: center;
    background-color: $color-white;
  }
  .bg-c1{
    background-image: url('../../assets/order.png');
    background-repeat: no-repeat;
  }
  .bg-c2{
    background-image: url('../../assets/icon-greyEval.png');
    background-repeat: no-repeat;
  }
  // 未评价图片
  .bg-c3{
    background-image: url('../../assets/icon_lightprocess.png');
    background-repeat: no-repeat;
  }
  // 已评价
  .bg-c4{
    background-image: url('../../assets/icon-eval.png');
    background-repeat: no-repeat;
  }
  .order-img {
    width: 180px;
    height: 41px;
    margin: 8px 0 20px;
  }
  .f-l{
    float: left;
    .fontTitle {
      color: $color-dark;
    }
    .fontTime {
      font-size: 12px;
      color: $color-gray;
    }
  }
}
.order-buyer-info {
  margin: 20px auto 16px;
  border: 1px solid $border-gray-light;
  border-left: none;
  border-right: none;
  padding-bottom: 20px;
}
.btns-group {
  display: inline-block;
}
.buyer-info {
  width: 22%;
  padding: 0 15px;
  & > span {
    line-height: 22px;
    font-size: 12px;
    color: $color-dark;
  }
}
.buyer-title {
  vertical-align: text-top;
}
.order-info {
  width: 60%;
  margin: auto;
  display: inline-block;
  border-left: 1px solid $border-gray-light;
  .icon-status {
    display: inline-block;
    margin-right: 18px;
  }
  .order-del {
    margin-left: 8%;
    & > span {
      line-height: 22px;
    }
  }
  .order-status {
    // width: 70%;
    margin-left: 10%;
    // margin: 0 auto;
  }
}
.buyer-options {
  margin: 10px auto;
  .free-look {
    width: 120px;
  }
  .dev-look {
    width: 100px;
    margin-right: 16px;
  }
}
.buyer-options-other {
  .t-under {
    font-size: 14px !important
  }
}
.store-info {
  padding-left: 15px;
  font-size: 12px;
  & > div {
    display: inline-block;
    margin-right: 100px;
    margin-bottom: 4px;
  }
}
.after-b {
  &:after {
    content: '';
    padding-bottom: 4px;
    width: 1190px;
    position: absolute;
    border-bottom: 1px solid $border-gray-light
  }
}
.orders {
  margin-top: 18px;
}
.tab-bg {
  background-color: #f0f0f0;
  padding-left: 10px;
  table {
    border: none
  }
}
.goods-info {
  .goods-img {
    width: 88px;
    height: 88px;
    margin-right: 14px;
  }
  .goods {
    position: relative;
    text-align: left;
    height: 88px;
    font-size: 12px;
    p {
      font-weight: 500;
    }
    .sku {
      color: $color-dark;
    }
  }
  .update-sku {
    position: absolute;
    bottom: 0;
  }
}
.order-amount {
  border: 1px solid $border-gray-light;
  padding: 18px;
  margin-bottom: 20px;
  .goods-all {
    border-right: 1px solid $border-gray-light;
    padding-right: 48px;
    span {
      line-height: 22px;
      font-size: 12px;
    }
  }
  .order-all {
    font-size: 16px;
    padding-left: 48px;
    p {
      text-align: right;
      line-height: 34px;
    }
  }
}

.p-order-list {
  margin-top: 12px;
  table {
    width: 100%;
    tr {
      border: 1px solid $border-gray-light;
      td {
        height: 114px;
        text-align: center;
        &:nth-child(1) {
          width: 38%;
          padding: 10px;
        }
        &:nth-child(2) {
          width: 14%
        }
        &:nth-child(3) {
          width: 16%
        }
        &:nth-child(4) {
          width: 16%
        }
        &:nth-child(5) {
          width: 16%
        }
      }
    }
  }
  .goods-name {
    text-align: left;
  }
  .input-count {
    width: 72px;
    margin: 0 auto
  }
}
.m-price {
  margin-top: 20px;
  font-size: 12px;
  color: #222222;
  .price {
    width: 80px;
    display: inline-block;
  }
  .change {
    padding: 0 20px 0 10px;
  }
}
.refund-info {
  .refund-del {
    span {
      font-size: 12px;
    }
    .refund-imgs {
      display: inline-block;
    }
    .refund-cause {
      margin-left: 60px;
      display: inline-block;
    }
    ul {
      li {
        width: 46px;
        height: 46px;
        margin-right: 10px;
        display: inline-block;
      }
    }
  }
}
.tip-panel {
  width: 100%;
}
// 发货弹框
.m-confirm-delivery {
  text-align: center;
  &.dev-info {
    margin-top: 20px;
    & > div {
      display: inline-block;
      .info {
        width: 230px;
      }
    }
  }
  .delivery {
    margin-bottom: 20px;
  }
  .title {
    width: 80px;
    display: inline-block;
    text-align: right;
  }
  .info {
    width: 300px;
    margin-left: 10px;
    display: inline-block;
  }
}
// 退款审核
.review-refund {
  margin-left: 30px;
  & > div {
    margin-bottom: 10px;
  }
  .refund-title {
    width: 80px;
    text-align: right;
    display: inline-block;
    vertical-align: top;
  }
  .refund-input {
    display: inline-block;
    width: 280px;
    textarea {
      background-color: transparent
    }
  }
}
// 部分发货弹框
.m-devliver-pannel {
  .p-order-list {
    margin-top: 12px;
    table {
      width: 100%;
      tr {
        border: 1px solid $border-gray-light;
        td {
          height: 114px;
          text-align: center;
          &:nth-child(1) {
            width: 26%;
            padding: 10px;
          }
          &:nth-child(2) {
            width: 10%
          }
          &:nth-child(3) {
            width: 12%
          }
          &:nth-child(4) {
            width: 12%
          }
          &:nth-child(5) {
            width: 10%
          }
          &:nth-child(6) {
            width: 22%
          }
        }
      }
    }
    .goods-info {
      .goods-img {
        width: 88px;
        height: 88px;
        margin-right: 14px;
      }
      .goods {
        position: relative;
        text-align: left;
        height: 88px;
        font-size: 12px;
        p {
          font-weight: 500;
        }
        .sku {
          color: $color-dark;
        }
      }
      .update-sku {
        position: absolute;
        bottom: 0;
      }
    }
    .goods-name {
      text-align: left;
    }
    .input-count {
      width: 72px;
      margin: 0 auto
    }
  }
  .m-confirm-delivery {
    text-align: center;
    &.dev-info {
      margin-top: 20px;
      & > div {
        display: inline-block;
        .info {
          width: 230px;
          margin-left: 10px;
          display: inline-block;
        }
      }
    }
    .title {
      width: 80px;
      display: inline-block;
      text-align: right;
    }
  }
}
</style>
